import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './List.css'
// 定义 List 组件
export default class List extends Component {
  state = {
    userList: [],
    isFirst: true, // 标识页面是否为第一次打开
    isLoading: false, // 标识是否正在加载数据
    err: '' // 存储请求相关的错误信息
  }

  componentDidMount () {
    // 做一些初始化的事情
    // 订阅消息
    this.token = PubSub.subscribe('atguigu', (msg, data) => {
      this.setState(data)
    })
  }

  componentWillUnmount () {
    // 取消订阅
    PubSub.unsubscribe(this.token)
  }

  render () {
    const { userList, isFirst, isLoading, err } = this.state
    return (
      <div className='row'>
        {isFirst ? (
          <h2>欢迎使用</h2>
        ) : isLoading ? (
          <h2 style={{ color: 'green' }}>正在加载...</h2>
        ) : err ? (
          <h2 style={{ color: 'red' }}>{err}</h2>
        ) : (
          userList.map(user => {
            return (
              <div key={user.id} className='card'>
                <a rel='noreferrer' href={user.html_url} target='_blank'>
                  <img
                    src={user.avatar_url}
                    style={{ width: '100px' }}
                    alt='avtor'
                  />
                </a>
                <p className='card-text'>{user.login}</p>
              </div>
            )
          })
        )}
      </div>
    )
  }
}
